<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气预报</title>
    <link href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
.navbar-static-top {
  margin-bottom: 19px;
}
html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
  min-height: 800px;
}
footer {
  padding: 30px 0;
}

/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }

  .row-offcanvas-right {
    right: 0;
  }

  .row-offcanvas-left {
    left: 0;
  }

  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -50%; /* 6 columns */
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -50%; /* 6 columns */
  }

  .row-offcanvas-right.active {
    right: 50%; /* 6 columns */
  }

  .row-offcanvas-left.active {
    left: 50%; /* 6 columns */
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%; /* 6 columns */
  }
}
    .button {
    color:#777777;
    border: none;
    background-color: #f8f8f8;
    padding-top: 15px;
    width:50px;
    outline: none;

}
.button:active{
    background-color: #f8f8f8;
    outline:none;
    border: 0px;

}
.button:hover{
    background-color: #f8f8f8;
    outline:none;
    border: 0px;
    color: #0f0f0f;
}
.button1 {
    color:#777777;
    border: none;
    background-color: #f8f8f8;
    padding-top: 17px;
    width:100px;
    outline: none;
    font-weight: normal;

}
.button1:active{
    background-color: #f8f8f8;
    outline:none;
    border: 0px;

}
.button1:hover{
    background-color: #f8f8f8;
    outline:none;
    border: 0px;
    color: #0f0f0f;
}
#button2 {
    color:#0f0f0f;
}
#button2:active{
    background-color: #0f0f0f;
    outline: none;
    border: none;

}
#button2:hover{
    background-color: #9acfea;
    outline: none;
    border: none;
}
#button3 {
    outline: none;

}
#button3:active{
    background-color: #e0e0e0;
    outline: none;
    border: none;

}
#button3:hover{
    background-color: #e0e0e0;
}

#button4 {
    color:#777777;
    border: none;
    background-color: #f8f8f8;
    padding-top: 16px;
    width:110px;
    outline: none;
    font-weight: normal;

}
#button4:active{
    background-color: #f8f8f8;
    outline:none;
    border: 0px;

}
#button4:hover{
    background-color: #f8f8f8;
    outline:none;
    border: 0px;
    color: #0f0f0f;
}
    #panel {
        position: fixed;
        background-color: white;
        max-height: 90%;
        overflow-y: auto;
        top: 10px;
        right: 10px;
        width: 280px;
    }
    #panel .amap-call {
        background-color: #009cf9;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    #panel .amap-lib-driving {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        overflow: hidden;
    }
    .input-card {
        display: flex;
        flex-direction: column;
        min-width: 0px;
        overflow-wrap: break-word;
        background-color: rgb(255, 255, 255);
        background-clip: border-box;
        max-width: 25rem;
        max-height: 35rem;
        box-shadow: rgba(114, 124, 245, 0.5) 0px 2px 6px 0px;
        position: fixed;
        bottom: 35rem;
        top:1rem;
        left: 5rem;
        border-width: 0px;
        border-radius: 0.4rem;
        flex: 1 1 auto;
        padding: 0.75rem 1.25rem;
    }
    .input-item-text {
        width: 5rem;
        text-align: justify;
        padding: 0.4rem 0.7rem;
        display: inline-block;
        text-justify: distribute-all-lines;
        text-align-last: justify;
        -moz-text-align-last: justify;
        -webkit-text-align-last: justify;
        -ms-flex-align: center;
        align-items: center;
        margin-bottom: 0;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        text-align: center;
        white-space: nowrap;
        background-color: #e9ecef;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }
    .amap-logo{
        display: none;
        opacity:0 !important;
    }
    .amap-copyright {
        opacity:0;
    }
    .amap-icon img{
        width: 25px;
        height: 34px;
    }
    .custom-input-card{
        width: 18rem;
    }
    .custom-input-card .btn:last-child{
        margin-left: 1rem;
    }
    .content-window-card{
        position: relative;
        width: 23rem;
        padding: 0.75rem 0 0 1.25rem;
        box-shadow: none;
        bottom: 0;
        left: 0;
    }
    .content-window-card p{
        height: 2rem;
    }
    .serach_area{position: absolute;top:15px;left: 118px;z-index: 9;}
    .serach_area .btn{height: 33px;}

    .info {
        float: left;
        margin: 0 0 0 10px;
    }
    label {
        width: 80px;
        float: left;
    }
    .detail {
        padding: 10px;
        border: 1px solid #aaccaa;
    }
    .custom-content-marker {
        position: relative;
        width: 25px;
        height: 34px;
    }

    .custom-content-marker img {
        width: 100%;
        height: 100%;
    }

    .custom-content-marker .close-btn {
        position: absolute;
        top: -6px;
        right: -8px;
        width: 15px;
        height: 15px;
        font-size: 12px;
        background: #ccc;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        line-height: 15px;
        box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
    }

    .custom-content-marker .close-btn:hover{
        background: #666;
    }
    .btn{
        width:6rem;
        margin-left:2rem;
    }
</style>
</head>
<body>
 <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
            <form action="/entry" method="post"><button type="submit"class="navbar-brand" id="button4">观赛指南</button></form>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
              <li><form action="/VenueIntroduction" method="post"><button type="submit" class="button1">场馆介绍</button></form></li>
              <li><form action="/routeplan" method="post"><button type="submit" class="button1">路径规划</button></form></li>
              <li><form action="/weather" method="post"><button type="submit" class="button1">天气查询</button></form></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
<div id="container">
</div>
<div class="">
</div>
<table class="input-card" style='height: max-content;width: max-content;table-layout: fixed;'>
    <tbody>
    <tr>
        <td>
            <label style='color:grey'>天气查询</label>
        </td>
    </tr>
    </tbody>
    <tbody>
    <tr>
        <td>
            <div class="input-item">
                <div class="input-item-prepend"><span class="input-item-text" >地址</span></div>
                <input id='tipinput' type="text" >
            </div>
        </td>
    </tr>
    </tbody>
    <tbody>
    <tr>
        <td>
            <button  class="btn" onclick="pandl()">天气查询</button>
        </td>
        <td>
            <button  class="btn" onclick="clears()">地址清除</button>
        </td>
    </tr>
    </tbody>
    <tbody id="box">
    <tr>
        <td>城市：</td>
        <td id="city"></td>
    </tr>
    <tr>
        <td>省份：</td>
        <td id="province"></td>
    </tr>
    <tr>
        <td>时间：</td>
        <td id="times"></td>
    </tr>
    <tr>
        <td>温度：</td>
        <td id="temp"></td>
    </tr>
    <tr>
        <td>湿度：</td>
        <td id="humi"></td>
    </tr>
    <tr>
        <td>风向：</td>
        <td id="wd"></td>

    </tr>
    <tr>
        <td>风力：</td>
        <td id="wp"></td>
    </tr>
    <tr>
        <td>天气：</td>
        <td id="weather"></td>
    </tr>
    </tbody>
</table>
<div id="panel"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=8535793199ef3d1fea882f846479c73e&plugin=AMap.Autocomplete"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script src="//webapi.amap.com/ui/1.1/main.js"></script>
<!--引入UI组件库异步版本main-async.js（1.1版本） -->
<script src="//webapi.amap.com/ui/1.1/main-async.js"></script>
</body>
<script>
    function clears() {
    document.getElementById("tipinput").value ="";
    $("#box tr td:eq(1)").text("")
}
    function pandl(){
       //加载天气查询插件
    AMap.plugin('AMap.Weather', function() {
        //创建天气查询实例
        var weather = new AMap.Weather();

        //执行实时天气信息查询
        weather.getLive($('#tipinput').val(), function(err, data) {
            console.log(err, data);
            $('#city').text(data.city);
            $('#province').text(data.province);
            $('#times').text(data.reportTime);
            $('#temp').text(data.temperature);
            $('#humi').text(data.humidity);
            $('#wd').text(data.windDirection);
            $('#wp').text(data.windPower);
            $('#weather').text(data.weather);
        });
    });
}
</script>
</html>
